import React from 'react';
import './index.less';
import {render, bindModel, bindAction, removeAction, removeModel} from 'react-division';
import Action from './Action';
import Model from './Model';


bindAction({
    docA: Action
});
bindModel({
    docM: Model
});


export default render({
    models: ['docM'],
    actions: ['docA']
})((props) => {

    const {docM, action} = props;
    const compCreate = docM.componentMap[docM.activeMenu];
    let CurrentComp = null;
    if (compCreate) {
        removeModel('compM');
        removeAction('compA');
        CurrentComp = compCreate({
            modelName: 'compM',
            actionName: 'compA'
        });
    }

    return (
        <div className="component-doc">
            <div className="doc-menu-left">
                {docM.componentList.map((item) => {
                    return (
                        <div 
                            className={`doc-menu-item ${item.key === docM.activeMenu ? 'active' : ''}`}
                            key={item.key}
                            onClick={action.docA.selectComponent(item)}
                        >
                            {item.label}
                        </div>
                    );
                })}
            </div>
            <div className="doc-menu-right">
                <div className="doc-menu-section-title">
                    示例
                </div>
                <div className="doc-demo-component">
                    {CurrentComp && <CurrentComp />}
                </div>
            </div>
        </div>
    );
});